<template>
  <tabbar @on-index-change="onIndexChange" @tabbar-text-active-color="'red'" style="max-width: 640px;overflow-x: hidden;">
    <tabbar-item selected>
      <Icon slot="icon" classAttr="icon-zhuye"></Icon>
      <Icon slot="icon-active" classAttr="icon-zhuye"></Icon>
      <span slot="label">首页</span>
    </tabbar-item>
    <tabbar-item>
      <Icon slot="icon" classAttr="icon-wodedangxuan"></Icon>
      <Icon slot="icon-active" classAttr="icon-wodedangxuan"></Icon>
      <span slot="label">我的</span>
    </tabbar-item>
  </tabbar>
</template>

<script>
import { Tabbar, TabbarItem, Group, Cell } from 'vux'
import Icon from '@/components/common/icon/icon'
export default {
  components: {
    Tabbar, TabbarItem, Group, Cell, Icon
  },
  methods: {
    onIndexChange (newIndex, oldIndex) {
      // TODO 切换路由
      console.log(newIndex, oldIndex)
      if (newIndex === 0) {
        this.$router.push({ path: '/main/index' })
      } else if (oldIndex === 0) {
        this.$router.push({ path: '/main/me' })
      }
    }
  }
}
</script>
<style lang="less" scoped>

  @import "../../assets/less/variables.less";

  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: @selectedColor !important;
  }

  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label span {
    color: @selectedColor !important;
  }

  .weui-tabbar {
    position: fixed;
  }

</style>

